import React from 'react';
import { useLocation } from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './index.less';

/**
 * @author liyuan
 * @desc 路由动画
 */
const AnimatedSwitch = ({ children }: { children: React.ReactNode }) => {
  const location = useLocation();
  // const [prevLocation, setPrevLocation] = useState(location);

  // useEffect(() => {
  //   setPrevLocation(location);
  // }, [location]);

  return (
    <TransitionGroup>
      <CSSTransition key={location.pathname} timeout={300} classNames="route">
        {children}
      </CSSTransition>
    </TransitionGroup>
  );
};

export default AnimatedSwitch;
